<template>
  <div v-if="visible" class="loading" :class="loadingClass">
    <div class="loading__overlay" @click="onOverlayClick"></div>
    <div class="loading__content">
      <!-- 加载图标 -->
      <div class="loading__spinner" :class="spinnerClass">
        <van-loading
          v-if="type === 'spinner'"
          :type="spinnerType"
          :size="size"
          :color="color"
        />
        <div v-else-if="type === 'dots'" class="loading__dots">
          <span class="loading__dot" v-for="i in 3" :key="i"></span>
        </div>
        <div v-else-if="type === 'pulse'" class="loading__pulse"></div>
        <div v-else-if="type === 'wave'" class="loading__wave">
          <span class="loading__wave-bar" v-for="i in 5" :key="i"></span>
        </div>
      </div>
      
      <!-- 加载文字 -->
      <div v-if="text" class="loading__text">{{ text }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // 是否显示
  visible: {
    type: Boolean,
    default: false
  },
  // 加载类型
  type: {
    type: String,
    default: 'spinner', // spinner, dots, pulse, wave
    validator: (value) => ['spinner', 'dots', 'pulse', 'wave'].includes(value)
  },
  // 加载器类型（仅当type为spinner时有效）
  spinnerType: {
    type: String,
    default: 'circular' // circular, spinner
  },
  // 大小
  size: {
    type: [Number, String],
    default: '30px'
  },
  // 颜色
  color: {
    type: String,
    default: '#1989fa'
  },
  // 加载文字
  text: {
    type: String,
    default: ''
  },
  // 是否显示遮罩
  overlay: {
    type: Boolean,
    default: true
  },
  // 遮罩颜色
  overlayColor: {
    type: String,
    default: 'rgba(0, 0, 0, 0.7)'
  },
  // 是否垂直排列
  vertical: {
    type: Boolean,
    default: true
  },
  // 是否可以点击遮罩关闭
  closeOnClickOverlay: {
    type: Boolean,
    default: false
  },
  // z-index
  zIndex: {
    type: [Number, String],
    default: 2000
  }
})

const emit = defineEmits(['click-overlay', 'close'])

// 加载容器类名
const loadingClass = computed(() => {
  return {
    'loading--overlay': props.overlay,
    'loading--vertical': props.vertical
  }
})

// 加载器类名
const spinnerClass = computed(() => {
  return {
    [`loading__spinner--${props.type}`]: true
  }
})

// 点击遮罩
const onOverlayClick = () => {
  emit('click-overlay')
  if (props.closeOnClickOverlay) {
    emit('close')
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: v-bind(zIndex);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;

  &--overlay {
    pointer-events: auto;
  }

  &--vertical {
    .loading__content {
      flex-direction: column;
    }
    
    .loading__text {
      margin-top: $spacing-base;
      margin-left: 0;
    }
  }

  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: v-bind(overlayColor);
  }

  &__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-lg;
    background: rgba(0, 0, 0, 0.8);
    border-radius: $border-radius-lg;
    backdrop-filter: blur(10px);
    pointer-events: none;
  }

  &__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__text {
    color: $white;
    font-size: $font-size-base;
    margin-left: $spacing-base;
    white-space: nowrap;
  }

  // 点状加载器
  &__dots {
    display: flex;
    align-items: center;
    gap: $spacing-xs;
  }

  &__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: v-bind(color);
    animation: loading-dots 1.4s ease-in-out infinite both;

    &:nth-child(1) {
      animation-delay: -0.32s;
    }
    &:nth-child(2) {
      animation-delay: -0.16s;
    }
  }

  // 脉冲加载器
  &__pulse {
    width: v-bind(size);
    height: v-bind(size);
    border-radius: 50%;
    background: v-bind(color);
    animation: loading-pulse 1.5s ease-in-out infinite;
  }

  // 波浪加载器
  &__wave {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  &__wave-bar {
    width: 3px;
    height: v-bind(size);
    background: v-bind(color);
    border-radius: 2px;
    animation: loading-wave 1.2s ease-in-out infinite;

    &:nth-child(1) {
      animation-delay: -1.2s;
    }
    &:nth-child(2) {
      animation-delay: -1.1s;
    }
    &:nth-child(3) {
      animation-delay: -1.0s;
    }
    &:nth-child(4) {
      animation-delay: -0.9s;
    }
    &:nth-child(5) {
      animation-delay: -0.8s;
    }
  }
}

// 动画定义
@keyframes loading-dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes loading-pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes loading-wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

// 深色模式适配
@include dark-mode {
  .loading {
    &__content {
      background: rgba(255, 255, 255, 0.1);
    }
  }
}
</style>